<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../static/css/postArticle.css" th:href="@{/css/postArticle.css}">
</head>
<body>
<div class="article-publish-container">
    <form th:action="@{/posts/add}"  method="post" enctype="multipart/form-data">
        <input type="text" id="titleInput" placeholder="请输入标题（最多100个字）" maxlength="100" name="title">
        <textarea id="contentTextarea" placeholder="请输入正文" name="content"></textarea>
        <div class="publish-settings">
            <h3>发布设置</h3>
            <div class="cover-upload">
                <!-- <img id="preview" src="#" alt=""> -->
                <label for="coverUpload">添加封面

                </label>
                <div class="add-img"> <div class="add-img-outer"><input type="file" id="coverUpload" name="image" accept="image/jpeg, image/jpg, image/png">
                    <div class="cover-upload-placeholder" id="coverUploadPlaceholder">
                        + 添加文章封面
                    </div>
                    <button id="deleteButton" type="button">删除图片</button>
                </div>
                    <p class="cover-upload-tip">图片上传格式支持 JPEG、JPG、PNG</p></div>

            </div>

            <div class="dropdown-container">
                <label for="drop2" style="margin-right: 46px;">类别</label>
                <select id="drop2" name="categoryName">
                    <option value="">选择标签</option>
                    <option value="人工智能">人工智能</option>
                    <option value="区块链技术">区块链技术</option>
                    <option value="新能源科技">新能源科技</option>
                    <option value="电商运营">电商运营</option>
                    <option value="古典文学">古典文学</option>
                    <option value="现代艺术">现代艺术</option>
                    <option value="国际历史">国际历史</option>
                    <option value="国内体育">国内体育</option>
                    <option value="国际体育">国际体育</option>
                    <option value="心理健康">心理健康</option>
                    <option value="健身塑形">健身塑形</option>
                    <option value="环球美食">环球美食</option>
                    <option value="本地美食">本地美食</option>
                    <option value="境外旅游">境外旅游</option>
                    <option value="国内旅游">国内旅游</option>
                    <option value="科技数码">科技数码</option>
                    <option value="幼儿教育">幼儿教育</option>
                </select>
                <span class="question-mark-icon">&#9733;</span>
            </div>


        </div>
        <div class="bottom-bar">

            <span class="word-count">字数: <span id="wordCount">0</span></span>
            <span class="markdown-tip">Markdown 语法识别中 ②</span>
            <div class="button">
                <button id="previewButton">预览</button>
                <button id="publishButton" type="submit">发布</button>
            </div>
        </div>
    </form>
</div>
<script th:inline="javascript">



    function showCustomAlert(message, duration) {
        let customAlert = document.getElementById('customAlert');
        if (!customAlert) {
            div_outter=document.createElement('div');
            customAlert = document.createElement('div');
            customAlert.id = 'customAlert';
            // customAlert.style.margin='7px 12px';
            const alertMessage = document.createElement('p');
            alertMessage.id = 'alertMessage';
            customAlert.appendChild(alertMessage);

            document.body.appendChild(customAlert);
        }

        const alertMessage = document.getElementById('alertMessage');

        alertMessage.textContent = message;
        if(alertMessage.textContent==null){
            customAlert.style.display = 'none';
        }

        customAlert.style.display = 'block';
        setTimeout(() => {
            customAlert.style.display = 'none';
        }, duration);
    }
    let result = [[${result}]];
    let error = [[${errorMessage}]];
    if (result && result !== '') {
        showCustomAlert(result, 3000);
    }
    if (error && error !== '') {
        showCustomAlert(error, 3000);
    }

    // showCustomAlert(result, 3000);
    // showCustomAlert(error, 3000);
    console.log(result)
    console.log(error)

    function editArticle(postId) {
        // 发送AJAX请求获取文章详情
        $.ajax({
            url: `/posts/detail/${postId}`, // 假设后端接口为GET /posts/detail/{id}
            method: "GET",
            success: function(response) {
                // 填充数据到编辑表单
                const data = response.data; // 假设响应结构为{data: {post}}
                fillForm(data);
            },
            error: function(xhr, status, error) {
                console.error("获取文章详情失败:", error);
                alert("修改失败: 请重试");
            }
        });
    }

    // 填充表单的函数
    function fillForm(post) {
        // 填充标题
        document.getElementById('titleInput').value = post.title;
        // 填充正文
        document.getElementById('contentTextarea').value = post.content;
        // 填充分类（需根据后端返回的分类名称匹配下拉选项）
        const categorySelect = document.getElementById('drop2');
        categorySelect.value = post.categoryName; // 假设后端返回categoryName与option值一致

        // 填充封面图片（如有）
        if (post.imageUrl) {
            // 显示已上传的封面预览（需根据实际图片路径处理）
            document.getElementById('coverUploadPlaceholder').style.backgroundImage = `url('${post.imageUrl}')`;
        }
    }
</script>
</body>

<script src="../static/js/postArticle.js" th:src="@{/js/postArticle.js}"></script>
</html>